﻿<div id="pnItemInfo" class="panel panel-default" cts-loaded="itemInfoLoaded">
    <div class="panel-heading">
        <h4 class="panel-title">
            <span class="glyphicon glyphicon-info-sign"></span>&nbsp;&nbsp;
            <a data-toggle="collapse" href="javascript:#collapseItemInfo">{{strings.ItemInfo}} <span ng-show="data.Messages.length == 0">- {{data.DataInfo.ItemName}}</span></a>
        </h4>
    </div>
    <div class="panel-body collapse in" id="collapseItemInfo">
        <div class="col-width-3" ng-hide="data.Messages.length == 0">
            {{data.Messages[0].MessageDetail}}
        </div>
        <div class="col-width-1" ng-hide="data.DataInfo==undefined">
            <span class="lightbox" href="{{data.DataInfo.ItemImage}}_full">
                <img style="width: 200px; height: 200px;" ng-src='{{data.DataInfo.ItemImage}}_large' alt='{{data.DataInfo.ItemName}}' ui-jq="tooltip" data-original-title='{{strings.ShowLargeImage}}' />
            </span>
        </div>
        <div class="col-width-2" ng-hide="data.DataInfo==undefined">
            <span class="bolder">{{strings.ItemCd}}:</span> {{data.DataInfo.ItemCd}}
            <br />
            <span class="bolder">{{strings.TypeCd}}:</span> {{data.DataInfo.TypeName}}
            <br />
            <span class="bolder">{{strings.ViewCount}}:</span> {{data.DataInfo.ViewCount}}
            <br />
            <span class="bolder">{{strings.UpdateDate}}:</span> {{data.DataInfo.UpdateDate}}
            <br />
            <br />
            <span ng-hide="data.ListExemplar.length == 0">
                <span class="bolder"><span class="glyphicon glyphicon-star-empty"></span> {{strings.OtherColor}}:</span>
            </span>
            <div id="listExemplar">
                <div ng-repeat="item in data.ListExemplar" cts-repeat-loaded="listExemplarLoaded">
                    <a href="{{item.Link}}">
                        <img ng-src='{{item.ItemImage}}_small' alt='{{item.ItemName}}' title='{{item.ItemName}}' />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="pnListRelated" class="panel panel-default" ng-hide="data.DataInfo==undefined||data.ListRelated.length == 0">
    <div class="panel-heading">
        <h4 class="panel-title">
            <span class="glyphicon glyphicon-th-large"></span>&nbsp;&nbsp;
            <a data-toggle="collapse" href="javascript:#collapseListRelated">{{strings.ListRelated}}</a>
        </h4>
    </div>
    <div id="collapseListRelated" class="panel-body collapse in">
        <div id="listRelated">
            <div ng-repeat="item in data.ListRelated" cts-repeat-loaded="listRelatedLoaded">
                <div class="fleft tcenter">
                    <span class="lightbox" href="{{item.ItemImage}}_full" title="{{item.ItemName}}">
                        <img ng-src='{{item.ItemImage}}_normal' alt='{{item.ItemName}}' title='{{strings.ShowLargeImage}}' />
                    </span>
                    <h5><a href="{{item.Link}}">{{item.ItemName}}</a></h5>
                </div>
            </div>
        </div>
    </div>
</div>